<template>
  <div class="project4" :style="{backgroundImage: 'url('+ bg +')' }">
    <cheader :pageIndex="3"></cheader>
    <img src="./banner.png" alt="" class="banner">
    <div class="people">
      <div class="c-titleWrap">
        <div class="c-title">
          <div class="t">
            <img src="@/common/img/ball4.png" alt="" class="img1">
            <img src="./ball2.png" alt="" class="img2">
            <h2>“躬先表率”</h2>
            <span class="l"></span>
            <span class="r"></span>
          </div>
          <div class="b">优秀共产党员</div>
        </div>
      </div>
      <div class="s1" v-if="peopleArr.length">
        <swiper :options="swiper1Option" ref="s1Swiper">
          <swiper-slide :style="{backgroundImage: 'url('+ item.cover +')' }" v-for="item in peopleArr" :key="item.id" :data-did='item.id'>
            <!-- <div class="coverWrap" :data-did='item.id'> -->
              <!-- <div class="cover" :style="{backgroundImage: 'url('+ item.cover +')'}" :data-did='item.id'></div> -->
              <!-- <h3 :data-did='item.id'>{{item.title}}</h3> -->
            <!-- </div> -->
          </swiper-slide>
        </swiper>
        <img src="@/common/img/l.png" class="left btn" @click="penS1l" alt="">
        <img src="@/common/img/r.png" class="right btn" @click="penS1r" alt="">
      </div>
      <button class="c-btn" v-if="peopleArr.length" @click="goToList(3, 0, 41)">查看</button>
    </div>
    <div class="doctor">
      <div class="c-titleWrap">
        <div class="c-title">
          <div class="t">
            <img src="@/common/img/ball4.png" alt="" class="img1">
            <img src="./ball2.png" alt="" class="img2">
            <h2>“医者仁心”</h2>
            <span class="l"></span>
            <span class="r"></span>
          </div>
          <div class="b">照片集锦</div>
        </div>
      </div>
      <div class="allWrap">
        <div class="lPart" v-if="doctorArr.length" >
          <transition name="fade" v-show="{show}">
            <div class="showBlc" ref="showBlc" :style="{backgroundImage: 'url('+ doctorArr[doctorCoe].cover +')' }" @click="goToDetail(3, 1, doctorArr[doctorCoe].id)">
              <div class="cover">
                <h3>{{doctorArr[doctorCoe].title.length>30?doctorArr[doctorCoe].title.substring(0, 30)+'...' : doctorArr[doctorCoe].title}}</h3>
              </div>
            </div>
          </transition>
        </div>
        <div class="rPart" v-if="doctorArr.length">
          <div class="s2" >
            <swiper :options="swiper2Option" ref="s2Swiper">
              <swiper-slide :style="{backgroundImage: 'url('+ item.cover +')' }" v-for="(item, index) in doctorArr" :key="item.id" :data-coe='index'>
                <div class="cover" :data-coe='index'>
                  <h3 :data-coe='index'>{{item.title.length>12?item.title.substring(0, 12)+'...' : item.title}}</h3>
                </div>
              </swiper-slide>
            </swiper>
          </div>
          <div class="group">
            <span class="btn small" @click="penS2l">
              <img src="./t.jpg" alt="">
            </span>
            <span class="btn small" @click="penS2r">
              <img src="./b.jpg" alt="">
            </span>
            <span class="btn big" @click="goToList(3, 1, 42, '')">更多</span>
          </div>
        </div>
      </div>
    </div>
    <div class="production">
      <div class="c-titleWrap">
        <div class="c-title">
          <div class="t">
            <img src="@/common/img/ball4.png" alt="" class="img1">
            <img src="./ball2.png" alt="" class="img2">
            <h2>“心得感悟”</h2>
            <span class="l"></span>
            <span class="r"></span>
          </div>
          <div class="b">手稿集锦</div>
        </div>
      </div>
      <div class="s3" v-if="productionArr.length">
        <swiper :options="swiper3Option" ref="s3Swiper">
          <swiper-slide :style="{backgroundImage: 'url('+ item.cover +')' }" v-for="item in productionArr" :key="item.id" :data-did = 'item.id'>
            <span class="cover" :data-did = 'item.id'>
              <h3 :data-did = 'item.id'>{{item.title.length>13?item.title.substring(0, 13)+'...' : item.title}}</h3>
            </span>
          </swiper-slide>
        </swiper>
        <img src="@/common/img/l.png" class="btn left" @click="penS3l" alt="">
        <img src="@/common/img/r.png" class="btn right" @click="penS3r" alt="">
      </div>
      <!-- <button class="c-btn">查看更多手稿</button> -->
    </div>
    <div class="mv">
      <div class="c-titleWrap">
        <div class="c-title">
          <div class="t">
            <img src="@/common/img/ball4.png" alt="" class="img1">
            <img src="./ball2.png" alt="" class="img2">
            <h2>“感动你我”</h2>
            <span class="l"></span>
            <span class="r"></span>
          </div>
          <div class="b">专题短片</div>
        </div>
      </div>
      <div class="s4">
        <swiper :options="swiper4Option" ref="s4Swiper" v-if="mvArr.length">
          <swiper-slide :style="{backgroundImage: 'url('+ item.cover +')' }" v-for="item in mvArr" :key="item.id" :data-did='item.id'>
            <!-- <img :src="item.cover" alt=""> -->
            <span class="cover" :data-did='item.id'>
              <h3 :data-did='item.id'>{{item.title.length>8?item.title.substring(0, 8)+'...' : item.title}}</h3>
              <h4 :data-did='item.id'>{{item.durtime}}</h4>
            </span>
          </swiper-slide>
        </swiper>
        <img src="@/common/img/l.png" class="btn left" @click="penS4l" alt="">
        <img src="@/common/img/r.png" class="btn right" @click="penS4r" alt="">
      </div>
      <button class="c-btn" @click="goToList(3, 3, 44)">查看</button>
    </div>
    <cfooter></cfooter>
  </div>
</template>
<script>
import cheader from '@/components/cheader/cheader'
import cfooter from '@/components/cfooter/cfooter'
import { swiper, swiperSlide } from 'vue-awesome-swiper'
import api from '@/common/js/api'
import '@/common/css/swiper.min.css'
export default {
  data () {
    return {
      bg: require('@/common/img/bg.png'),
      show: false,
      swiper1Option: {
        slidesPerView: 4,
        spaceBetween: 20,
        loop: true,
        // autoplay: true,
        on: {
          click: (e) => {
            let did = e.target.dataset.did
            this.goToDetail(3, 0, did)
          }
        }
      },
      swiper2Option: {
        direction: 'vertical',
        slidesPerView: 3,
        spaceBetween: 10,
        loop: true,
        on: {
          click: (e) => {
            this.doctorCoe = e.target.dataset.coe
            this.change()
          }
        }
      },
      swiper3Option: {
        slidesPerView: 3,
        spaceBetween: 20,
        loop: true,
        autoplay: true,
        on: {
          click: (e) => {
            let did = e.target.dataset.did
            this.goToList(3, 2, 43, did)
          }
        }
      },
      swiper4Option: {
        slidesPerView: 3,
        spaceBetween: 20,
        loop: true,
        // autoplay: true,
        on: {
          click: (e) => {
            let did = e.target.dataset.did
            this.goToDetail(3, 3, did)
          }
        }
      },
      peopleArr: [],
      doctorArr: [],
      doctorCoe: 0,
      productionArr: [],
      mvArr: []
    }
  },
  mounted () {
    api.project4Index().then(res => {
      if (res.data.result === '0') {
        this.peopleArr = res.data.data.person
        this.doctorArr = res.data.data.photos
        this.productionArr = res.data.data.scripts
        this.mvArr = res.data.data.movies
      }
    }).then(() => {
      this.swiper1.el.onmouseover = () => {
        this.swiper1.autoplay.stop()
      }
      this.swiper1.el.onmouseout = () => {
        this.swiper1.autoplay.start()
      }
      this.swiper3.el.onmouseover = () => {
        this.swiper3.autoplay.stop()
      }
      this.swiper3.el.onmouseout = () => {
        this.swiper3.autoplay.start()
      }
      // this.swiper4.el.onmouseover = () => {
      //   this.swiper4.autoplay.stop()
      // }
      // this.swiper4.el.onmouseout = () => {
      //   this.swiper4.autoplay.start()
      // }
    })
  },
  computed: {
    swiper1 () {
      return this.$refs.s1Swiper.swiper
    },
    swiper2 () {
      return this.$refs.s2Swiper.swiper
    },
    swiper3 () {
      return this.$refs.s3Swiper.swiper
    },
    swiper4 () {
      return this.$refs.s4Swiper.swiper
    }
  },
  methods: {
    penS1l () {
      this.swiper1.slidePrev()
    },
    penS1r () {
      this.swiper1.slideNext()
    },
    penS2l () {
      this.swiper2.slidePrev()
    },
    penS2r () {
      this.swiper2.slideNext()
    },
    penS3l () {
      this.swiper3.slidePrev()
    },
    penS3r () {
      this.swiper3.slideNext()
    },
    penS4l () {
      this.swiper4.slidePrev()
    },
    penS4r () {
      this.swiper4.slideNext()
    },
    change () {
      this.$refs.showBlc.classList.add('a')
      setTimeout(() => {
        this.$refs.showBlc.classList.remove('a')
      }, 500)
    },
    // 去专题列表页 (专题几，第几个模块, 后端参数type, 后端参数id)
    goToList (project, blc, postType, postId) {
      this.$router.push({
        name: 'projectList',
        query: {
          project: project,
          blc: blc,
          postType: postType,
          postId: postId
        }
      })
    },
    // 去文章详情页 (专题几，第几个模块, 后端参数id, 后端参数id)
    goToDetail (project, blc, did) {
      this.$router.push({
        name: 'projectDetail',
        query: {
          project: project,
          blc: blc,
          did: did
        }
      })
    }
  },
  components: {
    cheader,
    cfooter,
    swiper,
    swiperSlide
  }
}
</script>
<style lang="scss" scoped>
  $projectGreen: #2e9a9a;
  .project4 {
    background: no-repeat top center $projectGreen;
    .c-btn {
      height: 26px;
      line-height: 23px;
      padding: 0 26px;
      // background-color: #006e6e;
      border: 0 none;
      border-radius: 40px;
      color: #fff;
      cursor: pointer;
      display: block;
      margin: 0 auto;
      background-color: rgba($color: #fff, $alpha: .3);
    }
    .c-titleWrap {
      text-align: center;
      .c-title {
        display: inline-block;
        margin-bottom: 30px;
        .t {
          height: 58px;
          line-height: 58px;
          padding: 0 27px;
          position: relative;
          margin-bottom: 15px;
          .img1 {
            position: absolute;
            top: 0;
            left: 10px;
          }
          .img2 {
            position: absolute;
            bottom: 0;
            right: 15px;
          }
          h2 {
            font-size: 30px;
            color: #fff;
            font-weight: bold;
            position: relative;
          }
          span {
            display: inline-block;
            width: 6px;
            height: 6px;
            background-color: #ffe75f;
            position: absolute;
            bottom: 4px;
            &.l {
              left: 0;
            }
            &.r {
              right: 0;
            }
          }
        }
        .b {
          font-size: 24px;
          color: #fff;
          text-align: center;
        }
      }
    }
    .banner {
      width: 900px;
      height: 570px;
      display: block;
      margin: 0 auto;
    }
    .people {
      margin-bottom: 38px;
      min-height: 463px;
      .s1 {
        position: relative;
        width: 964px;
        margin: 0 auto 28px;
        .swiper-container {
          width: 900px;
          .swiper-slide {
            // width: 250px !important;
            height: 280px;
            background: center no-repeat;
            background-size: cover;
            cursor: pointer;
            .coverWrap {
              position: absolute;
              left: 0;
              bottom: 0;
              width: 100%;
              height: 35px;
              overflow: hidden;
              .cover {
                // position: absolute;
                // bottom: 0;
                // left: 0;
                // width: 100%;
                // height: 266px;
                // background: bottom center no-repeat;
                // background-size: cover;
                // z-index: 1;
                // &::after {
                //   content: '';
                //   position: absolute;
                //   width: 100%;
                //   height: 350px;
                //   background:inherit;
                //   background-image: linear-gradient(transparent, #000);

                //   // filter: blur(6px);
                //   z-index: 2;
                // }
              }
              h3 {
                height: 35px;
                width: 100%;
                line-height: 35px;
                color: #fff;
                position: absolute;
                z-index: 3;
                left: 0;
                top: 0;
                font-size: 14px;
                text-align: center;
              }
            }
          }
        }
        .btn {
          display: block;
          width: 12px;
          height: 26px;
          // background-color: #ccc;
          cursor: pointer;
          position: absolute;
          top: 50%;
          margin-top: -13px;
          transition: all .3s;
          &:hover {
            transform: scale(1.3);
          }
          &.left {
            left: 0;
          }
          &.right {
            right: 0;
          }
        }
      }
    }
    .doctor {
      width: 900px;
      margin: 0 auto 40px;
      .allWrap {
        display: flex;
        justify-content: space-between;
        .lPart {
          width: 680px;
          height: 320px;
          // background-color: #ccc;
          .showBlc {
            width: 680px;
            height:320px;
            background: center no-repeat;
            background-size: cover;
            cursor: pointer;
            border-radius: 10px;
            position: relative;
            overflow: hidden;
            img {
              display: block;
              width: 680px;
              height:300px;
            }
            .cover {
              width: 680px;
              height: 160px;
              background-image: linear-gradient(transparent, #333);
              position: absolute;
              left: 0;
              bottom: 0;
              h3 {
                color: #fff;
                position: absolute;
                bottom: 20px;
                left: 10px;
              }
            }
          }
        }
        .rPart {
          width: 210px;
          // height: 278px;
          // background-color: #ccc;
          .s2 {
            .swiper-container {
              width: 210px;
              height: 278px;
              .swiper-slide {
                width: 210px;
                height: 86px;
                background: center no-repeat;
                background-size: cover;
                cursor: pointer;
                border-radius: 10px;
                position: relative;
                overflow: hidden;
                z-index: 3;
                .cover {
                  position: absolute;
                  width: 210px;
                  height: 43px;
                  background-image: linear-gradient(transparent, #333);
                  left: 0;
                  bottom: 0;
                  z-index: 1;
                  h3 {
                    color: #fff;
                    position: absolute;
                    left: 10px;
                    bottom: 10px;
                    font-size: 14px;
                  }
                }
              }
            }
          }
          .group {
            height: 32px;
            // background-color: red;
            width: 210px;
            margin-top: 10px;
            font-size: 0px;
            display: flex;
            justify-content: space-between;
            cursor: pointer;
            .btn {
              width: 54px;
              height: 32px;
              line-height: 32px;
              display: inline-block;
              background: #006e6e;
              border-radius: 10px;
              text-align: center;
              img {
                display: inline-block;
                vertical-align: top;
                margin-top: 12px;
              }
            }
            .big {
              width: 82px;
              background: #006e6e;
              font-size: 14px;
              text-align: center;
              color: #fff;
              border-radius: 10px;
            }
          }
        }
      }
    }
    .production {
      margin-bottom: 40px;
      min-height: 300px;
      .s3 {
        position: relative;
        // background-color: yellowgreen;
        width: 900px;
        margin: 0 auto 30px;
        .swiper-container {
          width: 850px;
          .swiper-slide {
            width: 270px;
            height: 170px;
            background: center no-repeat;
            background-size: cover;
            border-radius: 10px;
            overflow: hidden;
            cursor: pointer;
            .cover {
              display: block;
              width: 100%;
              height: 50%;
              background-image: linear-gradient(transparent, #000);
              position: absolute;
              left: 0;
              bottom: 0;
              h3 {
                position: absolute;
                left: 20px;
                bottom: 15px;
                color: #fff;
              }
            }
          }
        }
        .btn {
          display: block;
          width: 12px;
          height: 26px;
          // background-color: #ccc;
          position: absolute;
          top: 76px;
          cursor: pointer;
          transition: all .3s;
          &:hover {
            transform: scale(1.3);
          }
        }
        .left {
          left: 0;
        }
        .right {
          right: 0;
        }
      }
    }
    .mv {
      width: 900px;
      margin: 0 auto 70px;
      .s4 {
        position: relative;
        margin-bottom: 22px;
        .swiper-container {
          width: 850px;
          .swiper-slide {
            width: 284px;
            height: 160px;
            background: center no-repeat;
            background-size: cover;
            border-radius: 10px;
            overflow: hidden;
            cursor: pointer;
            .cover {
              display: block;
              width: 100%;
              height: 50%;
              background-image: linear-gradient(transparent, #000);
              position: absolute;
              left: 0;
              bottom: 0;
              h3 {
                position: absolute;
                left: 20px;
                bottom: 15px;
                color: #fff;
              }
              h4 {
                position: absolute;
                right: 20px;
                bottom: 15px;
                color: #fff;
              }
            }
          }
        }
        .btn {
          display: block;
          width: 12px;
          height: 26px;
          // background-color: #ccc;
          position: absolute;
          top: 76px;
          cursor: pointer;
          transition: all .3s;
          &:hover {
            transform: scale(1.3);
          }
        }
        .left {
          left: 0;
        }
        .right {
          right: 0;
        }
      }
    }
  }
  .a {
    animation: a 0.5s;
  }

  @keyframes a {
    0% {
      opacity: 0;
    }
    100% {
      opacity: 1;
    }
  }
</style>
